<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../../static/img/icon-Get-into@3.png" class="back-btn" @click="goBack"></image>
			<text class="header-title">成长计划</text>
		</view>
		
		<!-- 成长数据展示 -->
		<view class="grow-banner">
			<text class="gold-count">已有{{ growthData.Gold || 0 }}位</text>
		</view>
		
		<!-- 等级选择 -->
		<view class="level-selector">
			<view 
				class="level-item" 
				:class="{ active: selectedLevel === index }"
				v-for="(level, index) in levelList" 
				:key="index"
				@click="selectLevel(index)"
			>
				<image class="level-icon" :src="level.icon"></image>
				<text class="level-name">{{ level.name }}</text>
			</view>
		</view>
		
		<!-- 任务和奖励 -->
		<view class="task-reward-section">
			<!-- 任务部分 -->
			<view class="task-section">
				<view class="section-title">
					<text class="title-text">任务</text>
				</view>
				<view class="task-content">
					<view class="task-item">
						<image class="task-icon" src="../../../static/img/image/icon-pthy.png"></image>
						<text class="task-text">普通会员/ <text class="highlight">{{ currentRequirements.members }}</text>人</text>
					</view>
					<view class="task-item">
						<image class="task-icon" src="../../../static/img/image/icon-hhrzz.png"></image>
						<text class="task-text">合伙人/ <text class="highlight">{{ currentRequirements.partners }}</text>份</text>
					</view>
				</view>
			</view>
			
			<!-- 奖励部分 -->
			<view class="reward-section">
				<view class="section-title">
					<text class="title-text">奖励</text>
				</view>
				<view class="reward-content">
					<!-- 基础奖励 -->
					<view class="reward-item">
						<image class="reward-icon" src="../../../static/img/image/icon-jl.png"></image>
						<text class="reward-text">
							享受本市区域所有会员<br />在优享优品消费月分润<text class="highlight">{{ currentRequirements.percentage }}%</text>
						</text>
					</view>
					
					<!-- 额外奖励（银牌和金牌显示） -->
					<view class="reward-item extra-reward" v-if="selectedLevel > 0">
						<image class="reward-icon" src="../../../static/img/image/icon-jpo.png"></image>
						<text class="reward-text">
							可享受优享优品平台奖励<br />依法依规奖励<text class="highlight">{{ currentRequirements.bonus }}</text>万人民币<br />（实物或现金）
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { teamApi } from '../../../api/index.js'
	import {
		inject
	} from 'vue'
	
	export default {
		data() {
			return {
				baseUrl: inject('$baseUrl'),
				serverAddress: inject('$serverAddress', ''), // 提供默认值
				growthData: {},
				selectedLevel: 0, // 默认选择铜牌
				levelList: [
					{
						name: '铜牌',
						icon: '../../../static/img/image/icon-tp.png',
						requirements: { members: 100, partners: 50, percentage: 2, bonus: 0 }
					},
					{
						name: '银牌',
						icon: '../../../static/img/image/icon-yp.png',
						requirements: { members: 200, partners: 200, percentage: 3, bonus: 15 }
					},
					{
						name: '金牌',
						icon: '../../../static/img/image/icon-jp.png',
						requirements: { members: 500, partners: 500, percentage: 4, bonus: 50 }
					}
				]
			}
		},
		
		computed: {
			currentRequirements() {
				return this.levelList[this.selectedLevel].requirements;
			}
		},
		
		onLoad() {
			this.loadGrowthPlan();
		},
		
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 选择等级
			selectLevel(index) {
				this.selectedLevel = index;
			},
			
			// 加载成长计划数据
			async loadGrowthPlan() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					
					const result = await teamApi.getAgentGrowPlan();
					
					uni.hideLoading();
					
					if (result.r === 0) {
						this.growthData = result.data;
					} else {
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #EEEEEE;
		min-height: 100vh;
		font-size: 28rpx;
	}
	
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #FF5033;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	
	.back-btn {
		width: 40rpx;
		height: 64rpx;
		margin-left: 30rpx;
	}
	
	.header-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		color: white;
		margin-right: 70rpx;
	}
	
	.grow-banner {
		position: relative;
		width: 100%;
		height: 640rpx;
		margin-top: 128rpx;
		background-image: url('../../../static/img/image/banner-zsdlr.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	
	.gold-count {
		position: absolute;
		left: 600rpx;
		bottom: 80rpx;
		color: white;
		background-color: #FFA942;
		padding: 10rpx 56rpx;
		border-radius: 40rpx;
		font-size: 48rpx;
	}
	
	.level-selector {
		display: flex;
		justify-content: space-around;
		padding: 52rpx 172rpx 0;
		background-color: white;
		font-size: 28rpx;
	}
	
	.level-item {
		width: 188rpx;
		text-align: center;
		padding-bottom: 40rpx;
	}
	
	.level-item.active {
		border-bottom: 2rpx solid #FF532B;
	}
	
	.level-icon {
		width: 120rpx;
		height: 140rpx;
		display: block;
		margin: 0 auto 20rpx;
	}
	
	.level-name {
		display: block;
		color: #333;
	}
	
	.task-reward-section {
		margin-top: 40rpx;
		background-color: white;
	}
	
	.section-title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 120rpx 0;
	}
	
	.title-text {
		width: 870rpx;
		text-align: center;
		color: #E6882E;
		font-size: 48rpx;
		background-image: url('../../../static/img/image/k-rw.png');
		background-size: 100% 90rpx;
		background-repeat: no-repeat;
		background-position: center;
		line-height: 90rpx;
	}
	
	.task-content {
		display: flex;
		justify-content: space-between;
		padding: 0 180rpx 112rpx;
		border-bottom: 2rpx solid #E8E8E8;
		font-size: 28rpx;
	}
	
	.task-item {
		text-align: center;
	}
	
	.task-icon {
		width: 140rpx;
		height: 140rpx;
		display: block;
		margin: 0 auto 20rpx;
	}
	
	.task-text {
		color: #333;
	}
	
	.highlight {
		color: #FF6241;
	}
	
	.reward-content {
		display: flex;
		justify-content: space-between;
		padding: 0 112rpx 112rpx;
		border-bottom: 2rpx solid #E8E8E8;
		font-size: 48rpx;
	}
	
	.reward-item {
		text-align: center;
		flex: 1;
	}
	
	.reward-icon {
		width: 176rpx;
		height: 176rpx;
		display: block;
		margin: 0 auto 20rpx;
	}
	
	.reward-text {
		color: #333;
		font-size: 28rpx;
		line-height: 1.4;
	}
	
	.extra-reward {
		margin-left: 40rpx;
	}
</style>